<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        body{
            width:100%;
            height:100%;
            background:red;
            animation:myfirst 15s;
            /* -moz-animation:myfirst 5s; Firefox */
            /* -webkit-animation:myfirst 5s; Safari and Chrome */
            /* -o-animation:myfirst 5s; Opera */
        }
        #dk{
            margin: auto;
            width: 30%;
            border: gray solid 1px;
            margin-top: 150px;
        }
        @keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
    </style>
</head>
<body>
    <h1>分组</h1>
    <div id="dk">
    请输入你要分几组:<input id="zr" type="text"><button>分组</button>
    <div id="tb">
    </div>
    </div>
</body>

<script>
    var data1 = ["谢家旺","陈志文","赵子毅","李家栋","李俊波","杨庭高","曾贤龙","曾鹏","吴昌炜","姚振","吴达"];
    var data2 = ["陈泽群","彭红玉","陈涛","曾丹丹","刘加湘","陈需要","谢小龙","胡志成","廖智前","颜钢","周雨露"];
    var data3 = ["钟晓斌","黄日升","张钰锦","谢凯枫","王婷婷","周宏伟","周玲香","彭家俊","关瑞","邓明磊","刘佳鹏"];
    var cj1=data1.length
    var cj2=data2.length
    var cj3=data3.length
    var z=0;
    $("button").click(function(){
        $("table tr").remove();
        function randomsort(a, b) {
         return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
        }
        data1.sort(randomsort);//排序
        function randomsort(a, b) {
         return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
        }
        data2.sort(randomsort);//排序
        function randomsort(a, b) {
         return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
        }
        data3.sort(randomsort);//排序

        








        var zr=$("input").val();
        $("#tb").append("<table border='1'><table/>")
        for(i=0;i<zr;i++){
            $("table").append("<tr></tr>");
            $("tr").eq(i).append("<td>第"+(i+1)+"组</td>");
        } 
        console.log(zr)
        for(i=0;i<cj1;i++){
            z++
            if(z==zr){
                z=0;
            }
            // var index = Math.floor((Math.random()*data1.length)); 
            // console.log(data1[index]); 
            $("tr").eq(z).append("<td>"+data1[i]+"</td>");
            // data1.splice(index,1)
        }
        for(i=0;i<cj2;i++){
            z++
            if(z==zr){
                z=0;
            }
            // var index = Math.floor((Math.random()*data2.length)); 
            // console.log(data2[index]); 
            $("tr").eq(z).append("<td>"+data2[i]+"</td>");
            // data2.splice(index,1)
        }
        for(i=0;i<cj3;i++){
            z++
            if(z==zr){
                z=0;
            }
            // var index = Math.floor((Math.random()*data3.length)); 
            // console.log(data3[index]); 
            $("tr").eq(z).append("<td>"+data3[i]+"</td>");
            // data3.splice(index,1)
        }
    })
    function dl(){
        var arr = ["谢家旺","陈志文","赵子毅","李家栋","李俊波","杨庭高","曾贤龙","曾鹏","吴昌炜","姚振","吴达"];//定义个12位数组
        console.log(arr);
    //打乱数组
     function randomsort(a, b) {
     return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
    }
   arr.sort(randomsort);//排序
   console.log(arr);
    }
</script>

</html>